<script src="./page.js"></script>
<style lang="less" rel="stylesheet/less" scoped>
    @import "./page.less";
</style>

<template>
    <div class="card-panel">
        <el-steps :active="status" finish-status="success">
            <el-step title="步骤 1"></el-step>
            <el-step title="步骤 2"></el-step>
            <el-step title="步骤 3"></el-step>
            </el-steps>
        <el-button style="margin-top: 12px;">下一步</el-button>
        <el-row>
            <el-col :span="12">
                <el-form :model="form" label-width="118px">
                    <!-- <el-row type='flex' align="bottom">
                        <el-col>
                            <el-form-item label="选择账单" class="item">
                                <el-select v-model="form.chooseAccount" class="select-input" multiple>
                                    <el-option label="第一个账单" value="1"></el-option>
                                    <el-option label="第二个账单" value="2"></el-option>
                                    <el-option label="第三个账单" value="3"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row> -->
                    <!-- <el-row type='flex' align="bottom">
                        <el-col>
                            <el-form-item label="发票总金额" class="item">
                                <el-input v-model="form.totalPrice" class="select-input"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row type='flex' align="bottom">
                        <el-col>
                            <el-form-item label="发票类型" class="item">
                                <el-select v-model="form.invoiceType" class="select-input">
                                    <el-option label="增值税专用1" value="1"></el-option>
                                    <el-option label="增值税专用2" value="2"></el-option>
                                    <el-option label="增值税专用3" value="3"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row> -->
                    <el-row type='flex' align="bottom">
                        <el-col>
                            <el-form-item label="开票抬头" class="item">
                                <el-input v-model="form.invoiceHead"  class="select-input"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row type='flex' align="bottom">
                        <el-col>
                            <el-form-item label="开票税号" class="item last-item">
                                <el-input v-model="form.companyNum" class="select-input"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row type='flex' align="bottom">
                        <el-col>
                            <el-form-item label="联系地址" class="item last-item">
                                <el-input v-model="form.address" class="select-input"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row type='flex' align="bottom">
                        <el-col>
                            <el-form-item label="联系电话" class="item last-item">
                                <el-input v-model="form.phone" class="select-input"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row type='flex' align="bottom">
                        <el-col>
                            <el-form-item label="银行名称" class="item last-item">
                                <el-input v-model="form.bankName" class="select-input"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row type='flex' align="bottom">
                        <el-col>
                            <el-form-item label="银行账号" class="item last-item">
                                <el-input v-model="form.bankAccount" class="select-input"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row type='flex' align="bottom">
                        <p class="tips">提示：这是一段提示，随便添一添无所谓的，这是一段提示</p>
                    </el-row>
                    <el-row type='flex' align="bottom">
                        <el-button type="primary" @click="submit" class="btn-block submit-btn green-btn">新增发票信息</el-button>
                    </el-row>
                </el-form>
            </el-col>
            <el-col :span="12">
                <Contract></Contract>
            </el-col>
        </el-row>

        <div class="dialog-wrapper">
            <el-dialog
                title="您已成功提交发票申请信息"
                :visible.sync="isShowDialog"
                width="400px"
                center>
                <div class="dialog-content">
                    <p>可到发票列表中查询开票状态</p>
                    <el-button type="primary" @click="toInvoiceList" class="btn-block redirect-btn">前往发票列表查看</el-button>
                </div>
            </el-dialog>
        </div>
        <div class="dialog-receive">
            <el-dialog
                title="请填写发票收件人信息"
                :visible.sync="isShowDialogR"
                width="70%"
                center>
                <div class="dialog-content">
                    <el-form :model="form" label-width="100px">
                        <el-row type='flex' align="bottom">
                            <el-col>
                                <el-form-item label="收件人姓名" class="item last-item">
                                    <el-input v-model="formR.name" class="select-input"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row type='flex' align="bottom">
                            <el-col>
                                <el-form-item label="收件人电话" class="item last-item">
                                    <el-input v-model="formR.phone" class="select-input"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row type='flex' align="bottom">
                            <el-col>
                                <el-form-item label="收件人地址" class="item last-item">
                                    <el-input v-model="formR.address" class="select-input"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <el-button type="primary" @click="confirmR" class="btn-block green-btn">确定</el-button>
                </div>
            </el-dialog>
        </div>
        <div class="dialog-receive">
            <el-dialog
                title=""
                :visible.sync="isShowDialogD"
                width="70%"
                center>
                <div class="dialog-content">
                    <el-form :model="formD" label-width="130px">
                        <el-row type='flex' align="bottom">
                            <el-col>
                                <el-form-item label="选择线下供应商" class="item">
                                    <el-select v-model="formD.supplier" class="select-input">
                                        <el-option label="滴滴（中国）有限公司" value="1"></el-option>
                                        <el-option label="滴滴（中国）有限公司" value="2"></el-option>
                                        <el-option label="滴滴（中国）有限公司" value="3"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row type='flex' align="bottom">
                            <el-col>
                                <el-form-item label="分配比例" class="item last-item">
                                    <el-input v-model="formD.radio" class="select-input"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <el-button type="primary" @click="confirmD" class="btn-block green-btn">确定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>